<template>
  <div class="recommend" ref="wrapper">
    <ul class="content">
      <li><home-swiper :swiperList="swiperList"></home-swiper></li>
      <li><home-rec :bookRecommend="bookRecommend"></home-rec></li>
      <li><home-new :bookNew="bookNew"></home-new></li>
    </ul>
  </div>
</template>

<script>
import HomeHeader from './components/Header';
import HomeSwiper from './components/Swiper';
import HomeFooter from './components/Footer';
import HomeRec from './components/BookRec';
import HomeNew from './components/BookNew';
import SecTitle from '../Home/common/SectionTitle';

import BScroll from 'better-scroll'
export default {
  props:["swiperList","bookRecommend","bookNew"],
  components:{
    HomeHeader,HomeSwiper,HomeFooter,HomeRec,HomeNew
  },
  mounted() {
     this.scroll = new BScroll(this.$refs.wrapper);
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
  .recommend
    height:100%
    overflow :hidden
</style>